﻿<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="()=>{this.visible=false}"
  >
    <a-spin :spinning="loading">
      
      <a-tabs type="card">
      <a-tab-pane key="1" tab="基本信息">
        <a-form-model label-width="120px" ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="MerchantName">
              <a-input disabled v-model="entity.MerchantName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="服务商名称" prop="ServiceProviderName">
              <a-input disabled v-model="entity.ServiceProviderName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发票状态" prop="InvoiceBusinessStatus">
              <a-input disabled v-model="entity.InvoiceBusinessStatus" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请日期" prop="ApplicationTime">
              <a-input disabled v-model="entity.ApplicationTime" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发票金额" prop="InvoiceAmount">
              <a-input disabled v-model="entity.InvoiceAmount" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="税率" prop="Rate">
              <a-input disabled v-model="entity.Rate" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="税额" prop="TaxAmount">
          <a-input disabled v-model="entity.TaxAmount" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="价税合计" prop="InvoiceTaxAmount">
          <a-input disabled v-model="entity.InvoiceTaxAmount" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发票抬头" prop="InvoiceRise">
          <a-input disabled v-model="entity.InvoiceRise" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="发票类型" prop="InvoiceType">
          <a-input disabled v-model="entity.InvoiceType" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发票代码" prop="InvoiceCode">
          <a-input v-model="entity.InvoiceCode" autocomplete="off" />
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="发票号码" prop="InvoiceNumber">
          <a-input v-model="entity.InvoiceNumber" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="物流公司" prop="wlgs">
          <a-select
                allowClear
                show-search
                v-model="entity.wlgs"
                placeholder="请选择物流公司"
              >
                <a-select-option v-for="(item, index) in wlgsList" :key="index" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
        </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="物流单号" prop="wldh">
          <a-input v-model="entity.wldh" autocomplete="off" />
        </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="备案" prop="Remarks">
          <a-textarea :rows="3" v-model="entity.Remarks" autocomplete="off"></a-textarea>
        </a-form-model-item>
          </a-col>
        </a-row>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane key="2" tab="扫描件">
       <a-upload
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :customRequest="selfUpload"
                        :before-upload="beforeUpload"
                      >
                        <img
                          style="width: 102px; height: 102px"
                          v-if="entity.InvoiceFilePath"
                          :src="entity.InvoiceFilePath"
                          alt="扫描件"
                        />
                        <div v-else>
                          <a-icon :type="loading ? 'loading' : 'plus'" />
                          <div class="ant-upload-text">扫描件</div>
                        </div>
                      </a-upload>
      </a-tab-pane>
    </a-tabs>

      
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    parentObj: Object
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      wlgsList:[
        {title:'中通快递',value:'中通快递'},
        {title:'圆通快递',value:'圆通快递'},
        {title:'韵达快递',value:'韵达快递'},
        {title:'百世快递',value:'百世快递'},
        {title:'顺丰快递',value:'顺丰快递'},
        {title:'邮政EMS',value:'邮政EMS'},
        {title:'中通快递',value:'中通快递'}
      ],
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: ''
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.title = title
      this.init()

      if (id) {
        this.loading = true
        this.$http.post('/Base_leasesystem_invoicedetail/leasesystem_invoicedetail/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_leasesystem_invoicedetail/leasesystem_invoicedetail/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    selfUpload({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.InvoiceFilePath = res.url
        this.loading = false
      })
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpeg、png、jpg格式!')
      }
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
  }
}
</script>
